<template>
    <div class="user-dashboard">

        <!-- 贴顶导航 -->
        <!-- <UserFixedHead :title="'Welcome,' +(userInfo.name || 'user') +'!' " /> -->
        <UserFixedHead title="Dashboard" :top="18" />

        <!-- 初始化 -->
        <UxIniting v-if="!inited" />

        <!-- 数据准备好了 -->
        <template v-else>

            <div class="user-dashboard-name">

                <cite>
                    <b v-text="getUserName()" :style="'background-color:' + randomColor()"></b>
                    <!-- <CommonLevelDiscount :level="userInfo.level" type="icon" v-show="userInfo.level > 1" /> -->

                    <UxToolTip :content="activeLabel.discount_label + 'off'" placement="top" v-show="userInfo.level > 1">
                        <CommonLevelDiscount :level="userInfo.level" type="icon" />
                    </UxToolTip>
                </cite>
                <p>
                    <strong>Welcome, {{ userInfo.name }}!</strong>
                    <span>Grow a successful clothing line step by step!</span>
                </p>
            </div>

            <h3>Progress tracker</h3>
            <UserBanner :data.sync="bannerData" :userData.sync="userInfo" />

            <h3>Loyalty program</h3>
            <UserDiscountProgress :data.sync="progressData" />
        </template>

    </div>
</template>
<script>
// "two_month_ago_sale": N-2月份的销售额,
// "one_month_ago_sale": N-1月份的销售额,
// "cur_month_ago_sale": 当前月的销售额,
// "total": 最近三个月的总销售额,
// "level": 当前用户等级，

// 用户等级说明：
// "1": 折扣 0%
// "2": 折扣 3%
// "3": 折扣 5%
// "4": 折扣 7%
// "5": 折扣 9%
import { mapGetters } from "vuex";
export default {
    name: "user",
    layout: "layout-user",
    async asyncData ({ app, route }) {
        let dashData = {};
        if (process.client) {
            // dashData = window.DASH_DATA || {};
        } else {
            let response = await app.$http("User.dashBoard");
            if (response.code == 0) {
                dashData = response.data || {};
            }
        }
        return {
            loading: false,
            product: false,
            dashData,
        };
    },
    data () {
        return {
            inited: false,
        };
    },
    computed: {
        ...mapGetters("user", {
            userInfo: "getUserInfo",
        }),
        bannerData () {
            // "first_template": 是否已有第一次设计,
            // "first_sample": 是否已有样品订单,
            // "first_store": 是否已有绑定店铺,
            let data = this.dashData || {};
            let obj = {
                regist_time: data.regist_time,
                first_template: data.first_template || false,
                first_sample: data.first_sample || false,
                first_store: data.first_store || false,
                is_sub: data.is_sub || false,
                // is_sub: false,
                // first_template: false,
                // first_sample: false,
                // first_store: false,
            };



            // obj.first_template = false;
            // obj.first_sample = false;
            // obj.first_store = false;
            // obj.is_sub = false;

            return obj;
        },
        progressData () {
            let data = this.dashData || {};

            let result = {
                one_month_ago_sale: data.one_month_ago_sale || 0,
                two_month_ago_sale: data.two_month_ago_sale || 0,
                cur_month_ago_sale: data.cur_month_ago_sale || 0,
                total: data.total || 0,
                level: parseInt(data.level) || 0,
                show_label: JSON.parse(data.show_label || "[]"),
                // total: 90000,
                // total: 700000,
                // total: 80000,
                // level: 7,
            };

            return result;
        },

        activeLabel () {
            const list = this.progressData.show_label || []
            return list.find((i, idx) => idx + 2 == this.progressData.level) || {}
        }
    },
    methods: {
        // 用户名
        getUserName () {
            if (this.userInfo && this.userInfo.name) {
                let str = String(this.userInfo.name);
                let first = str[0] || "N";
                return first.toUpperCase();
            } else {
                return "";
            }
        },
        randomColor () {
            const color = {
                1: '#23B98F',
                2: '#C5A886',
                3: '#A0AFBD',
                4: '#DBAA36',
                5: '#3EABD1',
                6: '#EA4C89',
                7: '#9878D1',
            }
            const level = Math.max(Math.min((this.userInfo || {}).level, 7), 1);
            return color[level];
        },
        async getUserData () {
            this.loading = true;
            let res = await this.$http("User.dashBoard");
            if (res.code == 0) {
                this.dashData = res.data;
                window.DASH_DATA = res.data;
            }
            this.loading = false;
        },
    },
    created () {
        if (process.client) {
            this.getUserData().then(() => this.inited = true);

            // if (this.dashData && JSON.stringify(this.dashData) !== "{}") {
            //   window.DASH_DATA = this.dashData;
            // } else {
            //   this.getUserData();
            // }
        }
    },
};
</script>
<style lang="scss" scoped>
.user-dashboard {
    display: flex;
    flex-direction: column;

    & > h3 {
        margin-top: 40px;
        margin-bottom: 18px;
        font-size: 18px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        color: #000000;
        line-height: 18px;
    }
}

.initing {
    flex: 1;
    width: 100%;
}

.user-dashboard-name {
    display: flex;
    margin-bottom: 14px;

    & > cite {
        display: flex;
        min-width: 60px;
        width: 60px;
        height: 60px;
        margin-right: 18px;
        position: relative;

        b {
            width: 100%;
            border-radius: 60px;
            font-size: 24px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .tooltip {
            position: absolute;
            right: -6px;
            bottom: -6px;
            width: 24px;
            height: 24px;
            background: #ffffff;
            border: 1px solid #e6e6e6;
            border-radius: 24px;
            box-sizing: border-box;
        }

        .level-discount {
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
        }
    }

    & > p {
        display: flex;
        flex-direction: column;
        white-space: nowrap;
        overflow: hidden;
        position: relative;

        strong {
            height: 34px;
            font-size: 32px;
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            color: #000000;
            line-height: 34px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        span {
            margin-top: 10px;
            font-size: 14px;
            font-family: Roboto-Regular, Roboto;
            font-weight: 400;
            color: #555555;
            line-height: 16px;
            text-overflow: ellipsis;
            overflow: hidden;
        }
    }
}
</style>
